import React, { Component } from "react";
// 引入classnames，用于处理不同情况添加不同的样式
import classNames from "classnames/bind";
// 引入css的时候，可以添加一个变量名
import styles from "./05-classnames.css";

let cx = classNames.bind(styles);

class App extends Component {
  // 添加响应式数据
  state = {
    show: false,
  };

  render() {
    let className = cx({
      // key和value表示的是类名和表达式
      red: this.state.show,
      green: !this.state.show,
      big: true,
    });
    return (
      <>
        <h2>classnames不同的条件添加不同的样式</h2>
        {/* <p className={this.state.show ? "red" : "green"}>hello react!</p> */}
        <p className={className}>hello react!</p>
      </>
    );
  }
}

export default App;
